<template>
  <el-container style="width: 100%; text-align: center" direction="vertical">
    <el-pagination
      style="padding: 10px 10px 5px 10px;"
      :current-page="currentPage"
      @current-change="handleCurrentChange"
      :page-size="1"
      layout="total, prev, pager, next, jumper"
      :total="pageCount"
    >
    </el-pagination>
    <div style="width: 60%; margin: 0 auto">
      <pdf
        ref="pdf"
        :src="src"
        :page="currentPage"
        @num-pages="numPages"
      ></pdf>
    </div>
  </el-container>
</template>

<script>
  import pdf from 'vue-pdf'
  import {transformArrayBufferToBase64} from '@/utils/index'
  export default {
    name: 'PdfView',
    components: {pdf},
    data: function() {
      return {
        currentPage: 2, // pdf文件页码
        pageCount: 0, // pdf文件总页数
        src: null,
      }
    },
    props: {
      id: {
        type: String,
        default: '1237025239384870914'
      },
      version: Number,
    },
    created() {
      this.getPdfData(this.id, this.version, this.applyId);
      // this.$refs.pdf.$el.style.width = "60%";
      console.log(this.$refs.pdf)
    },
    methods: {

      getPdfData(id, version, applyId) {
        this.$api.getFileArray(id, version, applyId).then(res => {
          let blob = new Blob([res.data])
          this.src = window.URL.createObjectURL(blob)
        })
      },
      loadedHandle(e) {
      },
      numPages(e) {
        this.pageCount = e
      },
      handleCurrentChange(val) {
        this.currentPage = val;
      }

    }
  }
</script>

<style scoped>

</style>
